<template>
	<view>
		<view style="">
		<input class="uni-input"  v-model="verificationCode" placeholder="请输入卷码"/>
		 <uni-icons @click="scanOnescan" style=" width: 10vw;" type="scan" size="60"></uni-icons>
		</view>
		<button @click="reqverfication">识别</button>
		<view>
<!-- 			<uni-card :title="'核销码：'+verCode">
				<view>
					<text class="uni-body">洗车要加钱，给你看攒劲的节目</text>
				</view>
			</uni-card> -->
			  <view class="container">

			<uni-card>
				<!-- 核销码 -->
				<section class="verification-code">
				  <text class="code-label">核销码：</text>
				  <text class="code-value">MC-{{ verificationCode }}</text>
				</section>
				<!-- 服务内容 -->
				<order-card title="服务内容">
				  <view class="service-list">
				    <view 
				      v-for="(item, index) in serviceList" 
				      :key="index"
				      class="service-item"
				    >
				      <text class="dot">•</text>
				      <text class="text">{{ item }}</text>
				    </view>
				  </view>
				</order-card>
				
				<!-- 订单信息 -->
				<order-card title="订单信息">
				  <view class="order-info">
				    <info-item label="订单价格：" :value="`￥${orderInfo.totalAmount}`" />
				    <info-item 
				      label="实付金额：" 
				      :value="`￥${orderInfo.paidAmount}`" 
				      value-class="highlight" 
				    />
				    <info-item 
				      label="优惠金额：" 
				      :value="`-￥${orderInfo.discountAmount}`" 
				      value-class="discount" 
				    />
				  </view>
				</order-card>
				
				<!-- 支付信息 -->
				<order-card>
				  <info-item label="订单编号：" :value="orderInfo.orderNumber" />
				  <info-item label="支付时间：" :value="orderInfo.orderTime" />
				  <info-item label="预约时间：" :value="orderInfo.appointmentTime" />
				</order-card>
			</uni-card>
			<!-- 确认核销对话框 -->
			<uni-popup ref="popupRef" 
			      type="center"
			      :is-mask-click="true"
			      >
				      <view class="custom-popup">
				        <view class="title">核销确认</view>
				        <view >
				          <text class="tip">请仔细核对订单信息，操作不可撤销</text>
				        </view>
				        <view class="buttons">
				          <button class="cancel-btn" @click="closePopup">取消</button>
				          <button class="confirm-btn" @click="handleConfirm">确认核销</button>
				        </view>
				      </view>
			</uni-popup>
			<button class="button" type="primary" @click="changeInputDialogFlag">确认核销</button>


			  </view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import OrderCard from './components/OrderCard.vue';
import InfoItem from './components/InfoItem.vue';
import {getOrdrer,VerificationOrdrer} from '../../api/mcslf/order.js'
const flag = ref(true)
const inputDialog = ref()
const popupRef = ref(null)
// 订单信息
const orderInfo = ref({
  orderId:'',
  totalAmount: '30.00',
  paidAmount: '25.00',
  // 计算得出
  discountAmount: '5.00',
  orderNumber: '2020032554565799',
  orderTime: '2020.03.30 14:40:45',
  appointmentTime: '2020.03.30 14:40'
});
const changeInputDialogFlag = () =>{
	console.log('nmsk');
	popupRef.value.open();
	// console.log(inputDialogFlag.);
	 // inputDialogFlag.value = !inputDialogFlag.value;
}

const amount = ref(199.99)

const getOrderInfo = async (ordernumber)=>{
	let res = await getOrdrer(ordernumber);
	orderInfo.value = res.data;
	orderInfo.value.discountAmount = orderInfo.value.totalAmount - orderInfo.value.paidAmount;
	console.log(res);
}
// 打开弹窗
const openPopup = () => {
  popupRef.value.open()
}

// 关闭弹窗
const closePopup = () => {
  popupRef.value.close()
}

// 确认操作
const handleConfirm = () => {
  // console.log('执行核销操作', orderInfo.value.orderNumber)
  VerificationOrdrer(orderInfo.value.orderNumber);
  closePopup()
}

// 监听弹窗状态变化
const popupChange = (e) => {
  console.log(e.type === 'open' ? '弹窗打开' : '弹窗关闭')
}

const reqverfication = () =>{
  getOrderInfo(verificationCode.value);
}
const scanOnescan = () =>{
	uni.scanCode(
	{
		//  扫码回调函数
		success:function(res){
			getOrderInfo(res.result)
			verificationCode.value = res.result;
		},
		fail: (err) => {
		      console.error('扫描失败:', err);
		}

	});
}

// =============================================

// 响应式数据
const verificationCode = ref('1234-5678-9012');
const serviceList = ref([
  "XXX标准洗车服务包含",
  "整车泡沫冲洗擦干",
  "轮胎轮毂冲洗清洁",
  "车内吸尘",
  "内饰脚垫简单除尘",
  "（不包含虫尸、水泥、沥青和顽固污渍清理等）"
]);


// =============================================

</script>

<style scoped lang="scss">
	  .uni-input {
		margin-top: 20rpx;
	    height: 50px;
	    font-size: 15px;
	    padding: 0px;
	    flex: 1;
	    background-color: #55ffff;
		width: 80vw;
		float: left;
	  }
	  .container {
	    padding: 20rpx;
	    background-color: #f5f5f5;
	    min-height: 100vh;
	  }
	  
	  .verification-code {
	    background: #fff;
	    padding: 30rpx;
	    text-align: center;
	    margin-bottom: 20rpx;
	    border-radius: 12rpx;
	    /* ...其他样式同前 */
	  }
	  
	  
::v-deep .uni-popup__wrapper {
  border-radius: 16rpx;
  padding: 40rpx;
  background: #15ff92;
}

.custom-popup {
  width: 600rpx;
  background-color: #fff;
  .title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }


  .buttons {
    display: flex;
    justify-content: space-between;

    button {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 8rpx;
      font-size: 32rpx;

      &.cancel-btn {
        background-color: #f0f0f0;
        color: #666;
        margin-right: 20rpx;
      }

      &.confirm-btn {
        background-color: #007AFF;
        color: #fff;
      }
    }
  }
}
</style>
